<template>
  <view class="pages about">
    <view class="about-banner">
      <img src="/static/images/about_banner.png" mode="widthFix">
    </view>
    <view class="about-content">
      <view class="about-title"><text class="about-text">{{storeInfo.shopName}}</text></view>
      <view class="about-detail">
        <block v-if="!!storeDesc">
          <wxParse :content="storeDesc" />
        </block>
        <block v-else>
          <Empty desc="店家还没有店铺介绍哦！" />
        </block>

        <view class="store-address">
          <view class="store-address-icon">
            <image src="/static/images/user_center_address.png" mode="widthFix" />
          </view>
          <view class="store-address-detail">{{storeInfo.shopAddress}}<text class="see-navigation" @click="seeNavigation">立即导航</text></view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import wxParse from "mpvue-wxparse";
import Empty from "@/components/empty";
import { mapState } from "vuex";

export default {
  components: {
    Empty,
    wxParse
  },
  data() {
    return {
      storeDesc: null
    };
  },
  computed: {
    ...mapState(["storeInfo"])
  },
  created() {},

  mounted() {},

  methods: {
    //导航
    seeNavigation() {
      wx.openLocation({
        latitude: this.storeInfo.shopLatitude,
        longitude: this.storeInfo.shopLongitude,
        name: this.storeInfo.shopName,
        address: this.storeInfo.shopAddress
      });
    }
  },

  onLoad(options) {
    this.storeDesc = decodeURIComponent(this.storeInfo.shopIntro);
  },

  onShow() {}
};
</script>

<style lang="less">
@import "../../../../static/css/common";

.about {
  position: relative;
  .about-banner {
    max-height: 264px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .about-content {
    position: relative;
    margin: -10px 15px 20px;
    padding: 10px 15px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    .backgroundColor(#fff);
    z-index: 9;
    .about-title {
      width: 68%;
      margin: 0 auto;
      padding: 5px;
      text-align: center;
      background: url("")
        center repeat-x;
      .about-text {
        padding: 0 10px;
        font-weight: bold;
        .fontSize(16px);
        .backgroundColor(#fff);
      }
    }
    .about-detail {
      padding: 10px 0;
      line-height: 1.5;
      .wxParse {
        image {
          max-width: 100%;
        }
      }
      .store-address {
        display: flex;
        margin-top: 20px;
        padding: 20px 0;
        .store-address-icon {
          width: 20px;
          image {
            width: 100%;
          }
        }
        .store-address-detail {
          margin-left: 10px;
          .see-navigation {
            display: inline-block;
            margin-left: 5px;
            height: 20px;
            padding-left: 25px;
            text-align: right;
            color: #1890ff;
            background: url("");
            background-position: left center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
</style>
